<template>
  <div id="QualityHome">
    <Breadcrumb content="质量控制首页" />
    <div class="bodyContent">
      <Splitpanes class="area">
        <Pane size="25">
          <el-tree style="max-width: 600px" :data="data" :props="defaultProps" @node-click="handleNodeClick" />
        </Pane>
        <Pane size="75">
          <Splitpanes horizontal>
            <Pane size="50" class="chartsPane">
              <div class="leftChart">
                <div class="chartTitle">任务统计-样品</div>
                <div id="ecList1" class="chart"></div>
              </div>
              <div class="rightChart">
                <div class="chartTitle">检测统计-检测项目</div>
                <div id="ecList2" class="chart"></div>
              </div>
            </Pane>
            <Pane size="50"> </Pane>
          </Splitpanes>
        </Pane>
      </Splitpanes>
    </div>
  </div>
</template>

<script setup lang="ts">
// 引入组件区 ==========
import Breadcrumb from '@/components/Breadcrumb.vue';
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import { Splitpanes, Pane } from 'splitpanes';
import * as echarts from 'echarts';

// 定义变量区 ==========
let { proxy }: any = getCurrentInstance();

interface Tree {
  id: string;
  label: string;
  children?: Tree[];
}

const data: Tree[] = [
  {
    id: '01',
    label: '内部审核'
  },
  {
    id: '02',
    label: '评审管理'
  },
  {
    id: '03',
    label: '质量监督管理'
  },
  {
    id: '04',
    label: '不符合项管理'
  }
];

const defaultProps = {
  children: 'children',
  label: 'label'
};

// 方法定义区 ==========
onMounted(() => {
  const myChart = echarts.init(document.getElementById('ecList1') as HTMLElement);
  // 绘制图表
  myChart.setOption({
    grid: {
      left: 50,
      right: 50,
      top: 50,
      bottom: 40
    },
    tooltip: {},
    xAxis: {
      data: ['检验任务', '签到任务', '计划任务', '采集任务', '分配任务']
    },
    yAxis: {},
    series: [
      {
        name: '数量',
        type: 'bar',
        data: [5, 20, 36, 10, 10]
      }
    ]
  });

  const myChart2 = echarts.init(document.getElementById('ecList2') as HTMLElement);
  // 绘制图表
  myChart2.setOption({
    grid: {
      left: 50,
      right: 50,
      top: 50,
      bottom: 40
    },
    series: [
      {
        name: 'Nightingale Chart',
        type: 'pie',
        radius: [25, 100],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8
        },
        data: [
          { value: 40, name: 'rose 1' },
          { value: 38, name: 'rose 2' },
          { value: 32, name: 'rose 3' }
        ]
      }
    ]
  });

  window.addEventListener('resize', function () {
    myChart.resize();
  });
  window.addEventListener('resize', function () {
    myChart2.resize();
  });
});

const handleNodeClick = (node: Tree) => {
  // 使用路由导航跳转到指定路由，并携带参数
  proxy.$router.push({ path: '/qualityplan', query: { id: node.id, label: node.label } });
};
</script>

<style lang="scss" scoped>
#QualityHome {
  height: 100%;

  .bodyContent {
    height: calc(100% - 60px);

    .area {
      background-color: $base-white;
      .el-tree {
        padding-top: 10px;
        font-size: 15px;
        :deep(.el-tree-node){
          margin-bottom: 4px;
        }
      }

      .chartsPane {
        display: flex;

        .leftChart,
        .rightChart {
          width: 50%;
          height: 100%;

          .chartTitle {
            background-color: #dadada;
            border-bottom: 3px solid burlywood;
            padding: 5px;
            margin: 5px;
            font-size: 16px;
          }

          .chart {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: calc(100% - 40px);
          }
        }
      }
    }
  }
}
</style>
